<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/bootstrap-fileinput/fileinput.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="test3.css">
</head>
<body>
<!--<p>-->
    <!--[环球时报驻韩国、日本、加拿大特约记者　李军 李珍 陶短 房陈一 王伟 柳玉鹏]“美军特战部队万分危险的军事动作。”已许久没有“怒批美帝国主义”的朝鲜官方媒体朝中社和《劳动新闻》26日突然发声，揭批美军特种部队近来频频举行“渗透平壤”的训练，并斥责“这一做法明确地表明，美国针对一旦其不正当的强盗性的‘先无核化’图谋失败的情况下，正策划要发动侵朝战争，这是犯下滔天罪行的阴谋”。美国总统特朗普24日闪电取消了国务卿蓬佩奥访问朝鲜的计划，并指责中国因与美方贸易战而在朝核问题上不配合。特朗普的反复无常令外界担忧，原本有望重新进入对话局面的朝美无核化谈判再次陷入僵局。-->

    <!--　　24日，就在美国国务卿蓬佩奥公布第四次访朝计划仅过了一天，美国总统特朗普闪电取消了这一计划。特朗普在推特上发文称：“我已要求国务卿蓬佩奥这次不要去朝鲜了，因为我觉得我们在朝鲜半岛去核化上没有取得足够的进步。蓬佩奥期待在未来再次前往朝鲜，可能会在我们与中国的贸易关系解决之后。”“因为我们对中国采取了更加强硬的贸易立场，我认为他们在无核化的进程上并不会像过去那样帮忙。”-->

    <!--　　《华盛顿邮报》称，特朗普的推文标志着他在公开场合对美朝谈判的姿态发生了突然转变，之前他一直坚持认为新加坡峰会后朝鲜半岛无核化取得了进展，甚至声称“不再有来自朝鲜的核威胁”。然而，他在私下里则对助手越来越多地表达挫折感。美国情报机构近来宣称，平壤尽管公开宣布已拆除了两个测试设施，但仍在秘密地继续研发其核武器和弹道导弹。报道称，特朗普及其助手近来一直抱怨北京允许与朝鲜进行更多的贸易，而且特朗普政府目前正对中国采取更加强硬的贸易政策。曾在奥巴马政府国家安全委员会主管亚洲事务的官员迈德罗斯称：“从最基本的层面上来看，这是对朝鲜和中国施加压力的典型手段，当然，这两方面是相互联系的。不过，问题在于北京和平壤很清楚这个把戏。”-->

    <!--　　对于特朗普的无端指责，中国外交部发言人陆慷25日表示，我们支持美朝双方按照两国领导人新加坡会晤共识，积极推进政治解决半岛问题进程。现在的问题是，有关各方应当坚持政治解决的方向，积极接触、商谈，照顾彼此合理关切，展示更多诚意和灵活性，而不是反复无常，诿过于人，这样才能确保政治解决半岛问题进程不断取得进展。-->

    <!--　　韩国外交部25日也发表声明称，美国推迟蓬佩奥访问朝鲜的决定是“不幸的”，目前最重要的是努力在朝鲜半岛无核化方面取得实质性进展。韩国总统府青瓦台26日表示，正密切关注蓬佩奥取消访朝的相关动向。韩国《中央日报》网站引述青瓦台相关人士的话称，最近美朝关系似乎有些梗塞，但越是美朝关系陷入僵局，越是需要文在寅总统发挥作用，9月份的韩朝首脑会谈将按计划进行。-->

    <!--　　尽管文在寅赴朝计划不变，但多数韩媒担忧朝鲜半岛无核化进程可能会重新陷入僵局。《韩民族新闻》26日称，朝鲜半岛无核化进程可能重新陷入迷雾。报道引述韩国国家安保战略研究院研究员赵成烈的话称，鉴于特朗普公然取消蓬佩奥访朝行程，并将锅甩给中国，未来中美关系可能进一步紧张。特朗普此举也对韩朝关系造成相对的负面影响，位于开城的南北共同联络事务所即将开张，但美国显然将要求“调节对朝关系速度”，韩国政府不得不看美国的眼色行事。如果美朝对话毫无进展的话，文在寅访问平壤的成果也只会非常有限。不过，报道引述在华盛顿的外交消息人士的话称，目前美朝都还未发出谈判破裂的信号，因此两国之间的心理战和私下接触仍将进行。-->


<!--</p>-->
<!--<div class="form-group">-->
    <!--<label class="col-sm-3 control-label">展示图片</label>-->
    <!--<div class="col-sm-7">-->
        <!--<div id="fileList" class="uploader-list" style="float:right"></div>-->
        <!--<div id="imgPicker" style="float:left">添加图片</div>-->
    <!--</div>-->
<!--</div>-->

<div id="uploader-demo" class="controls">
    <div class="uploader-list fileList"> </div>
    <div class="filePicker">添加商品图册
        <br>最多 5 张
    </div>
</div>

</body>

<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/webuploader/webuploader.min.js"></script>

<script>
    //  图片webupload 上传
    $(function() {
        var $ = jQuery,
            $list = $('.fileList'),
            $filePicker = $('.filePicker'), // 上传按钮
            $upimgmax = 5, // 支持上传最大个数
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,
            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,
            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 自动上传。
                auto: true,
                // swf文件路径
                swf: 'js/plugins/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '/upload/save',  //  这里是图片上传地址
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash
                pick: {
                    id: $filePicker,
                    // multiple: false
                },
                duplicate: true,
                fileSingleSizeLimit: 5242880, //  单个文件大小
                fileNumLimit: $upimgmax, // 限制上传个数
                accept: {
                    title: 'Images',
                    extensions: 'jpg,jpeg,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png,pdf' //修改这行
                },
                thumb: {
                    width: 110,
                    height: 110,
                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 70,
                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: true,
                    // 是否允许裁剪。
                    crop: true,
                    // 为空的话则保留原有图片格式。
                    // 否则强制转换成指定的类型。
                    type: 'image/jpeg'
                }
            });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function(file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                // '<div class="info">' + file.name + '</div>' +
                '<div class = "file-panel" style = "height: 30px;" > 删除 ' +
                '<span class = "cancel delimgbtns" title="删除"></span></div>' +
                '</div>'
                ),
                $img = $li.find('img');
            $list.append($li);
            removefiles(file); // 文件删除
            // 创建缩略图
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            var uploadfilesNum = uploader.getStats().queueNum; //  共选中几个图片
            // 最多支持 5张
            if ($('.file-item').length >= $upimgmax) {
                $filePicker.hide();
                if ($('.file-item').length >= ($upimgmax + 1)) {
                    // 中断 取消 大于  5张图片的对象
                    uploader.removeFile(file, true);
                    $('.file-item').last().remove();
                }
            } else {
                $filePicker.show();
            }
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function(file, response) {
            var $li = $('#' + file.id),
                $img = $li.find('img'),
//            var data = response.data;
//                     console.log("data:"+data);
//                     var targetFileName = data["targetFileName"];
//                     var url = data["url"];
//                $fileUrl = response.data[0].url, // 图片上传地址
                $fileUrl = response.data["url"], // 图片上传地址
                $filename = file.name, // 上传文件名称
                $filesize = (file.size / 1024).toFixed(2); // 上传文件尺寸大小 保留2位
            $li.addClass('upload-state-done');
            // console.log(file);
            console.log(response);
            console.log('图片地址:' + $fileUrl);
            $img.attr('src', $fileUrl);
            removefiles(file); // 删除文件
            removehttpfiles();
            // 传值赋值
            // 商品详细图片 位置
            // 这里自己赋值 传值
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function(file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
            console.log(file);
            // 获取文件统计信息。返回一个包含一下信息的对象。
            /*successNum 上传成功的文件数
            progressNum 上传中的文件数
            cancelNum 被删除的文件数
            invalidNum 无效的文件数
            uploadFailNum 上传失败的文件数
            queueNum 还在队列中的文件数
            interruptNum 被暂停的文件数
            */
            // console.log(uploader.getStats().uploadFailNum);
        });
        uploader.on('error', function(handler) {
            if (handler == "Q_EXCEED_NUM_LIMIT") {
                layer.msg("最多只能上传 " + $upimgmax + "张图片");
            }
        });
        // 删除按钮事件
        function removefiles(file) {
            // 删除本条数据
            // $('.delimgbtns').each(function(index, el) {
            $('.delimgbtns').click(function() {
                // 中断 取消 传图
                uploader.removeFile(file, true);
                var spthisdiv = $(this).parent();
                spthisdiv.parent('.file-item').remove();
                $filePicker.show(); // 上传按钮显示
            });
            // });
        }
        // 删除服务器文件
        function removehttpfiles() {
            // 删除本条数据
            // $('.delimgbtns').each(function(index, el) {
            $('.delimgbtns').click(function() {
                // event.preventDefault();
//                var spthisdiv = $(this).parent();
//                // 如果上传成功才执行
//                var thisimgsrc = spthisdiv.siblings('img').attr('src');
//                var geturl = "attach/deleteFlowFile";
//                $.axpost(
//                    geturl, {
//                        url: thisimgsrc,
//                    },
//                    //请求成功时处理
//                    function(data) {
//                        layer.msg('删除成功');
//                    });
            });
            // });
        }
    });
</script>
</html>